<template>
	<view class="menu-content">
		<image class="menu icon" @click.stop="handleClick('hide')" :class="{'menuOpen':openFlag}"
			:src="require('../../static/s-menu/add.png')" alt="" srcset=""></image>
		<image class="bg-menu icon" @click.stop="handleClick('bg')" :class="{'open open1':openFlag}"
			:src="require('../../static/s-menu/bg.png')" alt="" srcset=""></image>
		<image class="pic-menu icon" @click.stop="handleClick('pic')" :class="{'open open2':openFlag}"
			:src="require('../../static/s-menu/pic.png')" alt="" srcset=""></image>
		<image class="text-menu icon" @click.stop="handleClick('text')" :class="{'open open3':openFlag}"
			:src="require('../../static/s-menu/text.png')" alt="" srcset=""></image>
		<image class="save-menu icon" @click.stop="handleClick('shape')" :class="{'open open4':openFlag}"
			:src="require('../../static/s-menu/shape.png')" alt="" srcset=""></image>
		<image class="text-menu icon" @click.stop="handleClick('save')" :class="{'open open5':openFlag}"
			:src="require('../../static/s-menu/save.png')" alt="" srcset=""></image>
	</view>
</template>
shapesave
<script>
	export default {
		name: 'sMenu',
		data() {
			return {
				openFlag: false, //是否展开菜单
			}
		},
		methods: {
			/**
			 * @description: 选择背景图
			 * @param {type} 
			 * @return {type} 
			 * @author: hch
			 */
			handleClick(type) {
				if (type === 'hide') {
					this.openFlag = !this.openFlag
				}
				this.$emit('clickMenu', type)
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "../../scss/common.scss";

	.menu-content {
		z-index: 10;

		.icon {
			position: fixed;
			bottom: 135rpx;
			right: 80rpx;
			width: 80rpx;
			height: 80rpx;
			opacity: 0;
			transform: rotate(0deg);
			transition: all 0.5s ease-out 0s;
			background-color: #fff;
			border-radius: 50%;
			box-shadow: 0 0 0 5rpx #fff;
		}

		.text-menu {
			width: 80rpx;
			height: 80rpx;
		}

		.menu {
			z-index: 1;
			opacity: 1;
		}

		.menuOpen {
			transform: rotate(180deg);
			animation-fill-mode: forwards;
			transition: all 0.5s ease-out 0s;
		}

		.open {
			opacity: 1;
			transform: rotate(360deg);
			animation-fill-mode: forwards;
			transition: all 0.5s ease-out 0s;
		}

		.open1 {
			right: 60rpx;
			bottom: 250rpx;
		}

		.open2 {
			right: 170rpx;
			bottom: 230rpx;
		}

		.open3 {
			right: 210rpx;
			bottom: 130rpx;
		}

		.open4 {
			right: 160rpx;
			bottom: 40rpx;
		}

		.open5 {
			right: 55rpx;
			bottom: 30rpx;
		}
	}
</style>